{% extends 'base.html' %}

{% block title %}
    {% if question.id == "start" %}
        Tree | Home
    {% elif question.id.startswith("TA") %}
        Tree | {{ question.id }} -&gt; Techniques
    {% else %}
        Tree | {{ question.id }} -&gt; SubTechs
    {% endif %}
{% endblock %}

{% block main_id_block %}answerCardSearchBox{% endblock %}

{% block content %}

<div x-data="questionTree" class="container-fluid">

    {# Header #}
    <div class="row">
        <div class="col-12 col-md-9 offset-md-3 col-xl-10 offset-xl-2">

            {# Crumbs (all pages but Home) #}
            <template x-if="$store.question.crumbs.length > 1">
                <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
                    <ol class="breadcrumb mb-2">
                        <template x-for="(crumb, index) in $store.question.crumbs" :key="crumb.url">
                            <li
                                class="breadcrumb-item"
                                :class="(index === $store.question.crumbs.length-1) ? 'active' : ''"
                            >
                                {# not last #}
                                <template x-if="index !== $store.question.crumbs.length-1">
                                    <a
                                        :href="resolveURL(crumb.url)"
                                        x-text="crumb.name"
                                    ></a>
                                </template>

                                {# last #}
                                <template x-if="index === $store.question.crumbs.length-1">
                                    <a
                                        x-text="crumb.name"
                                        aria-current="page"
                                    ></a>
                                </template>
                            </li>
                        </template>
                    </ol>
                </nav>
            </template>

            {# Question (Page Title) #}
            <h1 class="fs-3 mb-3">
                <span class="visually-hidden">Question: </span>
                <span x-html="filterQuestionHTML($store.question.text)"></span>
            </h1>
        </div>
    </div>

    {# Body #}
    <div class="row">

        {# Filters #}
        <div class="col-12 col-md-3 col-xl-2">
            <h2 class="visually-hidden">Filters</h2>

            {# Platform #}
            <div x-data="collapseTracker(false, 'question-platform')" x-bind="binds" class="row mb-3 filterRow">

                <div class="col-4 col-md-12 text-center">
                    <h3 class="fs-5 my-1">Filter Platforms</h3>
                    <div class="btn-group-vertical w-100 mb-2">
                        <button
                            class="btn btn-primary"
                            type="button"
                            data-bs-toggle="collapse"
                            data-bs-target="#platformFilterCheckboxes"
                            aria-controls="platformFilterCheckboxes"
                            aria-label="Show / hide Platform filters"
                            title="Show / hide Platform filters"
                            x-text="`${show ? 'Hide' : 'Show'} Filters`"
                            :aria-expanded="show"
                        >Show Filters</button>
                        <button
                            class="btn btn-secondary"
                            type="button"
                            @click="platforms = []"
                            :aria-label="`Clear ${platforms.length} platform filters`"
                            title="Clear platform filters"
                        >
                            Clear Filters&nbsp;
                            <span class="badge text-bg-light" x-text="platforms.length">0</span>
                        </button>
                    </div>
                </div>

                <div x-ref="collapse" id="platformFilterCheckboxes" class="col-8 col-md-12 collapse filterCheckboxes">
                    <div class="row">

                        {# Checkboxes #}
                        <template x-for="platform in $store.question.platformFilters.items" :key="platform.value">
                            <div class="col-12">
                                <div class="form-check" x-id="['platform-check']">
                                    <input
                                        class="form-check-input"
                                        type="checkbox"
                                        :id="$id('platform-check')"
                                        :value="platform.value"
                                        x-model.debounce="platforms"
                                        :aria-label="`Platform filter ${platform.name}`"
                                    >
                                    <label
                                        class="form-check-label"
                                        :for="$id('platform-check')"
                                        x-text="platform.name"
                                    ></label>
                                </div>
                            </div>
                        </template>

                    </div>
                </div>
            </div>

            {# Data Source #}
            <div x-data="collapseTracker(false, 'question-data-source')" x-bind="binds" class="row mb-3 filterRow">

                <div class="col-4 col-md-12 text-center">
                    <h3 class="fs-5 my-1">Filter Data Sources</h3>
                    <div class="btn-group-vertical w-100 mb-2">
                        <button
                            class="btn btn-primary"
                            type="button"
                            data-bs-toggle="collapse"
                            data-bs-target="#dataSrcFilterCheckboxes"
                            aria-controls="dataSrcFilterCheckboxes"
                            aria-label="Show / hide Data Source filters"
                            title="Show / hide Data Source filters"
                            x-text="`${show ? 'Hide' : 'Show'} Filters`"
                            :aria-expanded="show"
                        >Show Filters</button>
                        <button
                            class="btn btn-secondary"
                            type="button"
                            @click="data_sources = []"
                            :aria-label="`Clear ${data_sources.length} data source filters`"
                            title="Clear data source filters"
                        >
                            Clear Filters&nbsp;
                            <span class="badge text-bg-light" x-text="data_sources.length">0</span>
                        </button>
                    </div>
                </div>

                <div x-ref="collapse" id="dataSrcFilterCheckboxes" class="col-8 col-md-12 collapse filterCheckboxes">
                    <div class="row">

                        {# Checkboxes #}
                        <template x-for="dataSrc in $store.question.dataSrcFilters.items" :key="dataSrc.value">
                            <div class="col-12">
                                <div class="form-check" x-id="['data-source-check']">
                                    <input
                                        class="form-check-input"
                                        type="checkbox"
                                        :id="$id('data-source-check')"
                                        :value="dataSrc.value"
                                        x-model.debounce="data_sources"
                                        :aria-label="`Data source filter ${dataSrc.name}`"
                                    >
                                    <label
                                        class="form-check-label"
                                        :for="$id('data-source-check')"
                                        x-text="dataSrc.name"
                                    ></label>
                                </div>
                            </div>
                        </template>

                    </div>
                </div>
            </div>

        </div>

        {# Rest of Body #}
        <div class="col-12 col-md-9 col-xl-10">

            {# Search #}
            <div class="row">
                <div class="col-12">

                    <h2 class="visually-hidden">Search</h2>

                    <div class="form-floating">
                        <input placeholder="Search Answers" type="search" id="answerCardSearchBox" class="form-control mb-1" x-model.debounce="search">
                        <label for="answerCardSearchBox">Search Answers</label>
                    </div>
                    <p x-cloak x-show="searchStatus.length > 0" class="mb-0">
                        <strong aria-label="Search Status">Status:</strong> <span x-text="searchStatus" class="text-break"></span>
                    </p>

                </div>
            </div>

            {# Answer Cards #}
            <div class="row">
                <h2 class="visually-hidden">Answer Cards</h2>

                <template x-for="card in paginatedCards[_.clamp(page, 1, paginatedCards.length) - 1]" :key="card.id">
                    <div
                        class="col-12"
                        :class="card.id.startsWith('TA') ? 'col-md-6 col-xl-4' : ''"
                        style="padding: calc(var(--bs-gutter-x) * 0.5);"
                    >

                        <div class="answer-card card" :class="card.id.startsWith('TA') ? 'h-100' : ''">
                            <h3
                                class="card-header fs-6"
                                x-html="card.label"
                            ></h3>

                            <div class="card-body">

                                <div class="card-text">
                                    <span class="visually-hidden">Answer: </span>
                                    <div x-html="card.content"></div>
                                </div>

                                <div
                                    class="card-text"
                                    x-cloak
                                    x-show="(card.additional_matches ?? []).length > 0"
                                >
                                    <span style="color: #0F0; font-weight: 700;">Desc / SubTech Matches: </span>
                                    <span x-text="(card.additional_matches ?? []).join(', ')"></span>
                                </div>

                            </div>

                            <div class="card-footer">
                                <a
                                    class="link-strong-blue card-link stretched-link"
                                    :href="resolveURL((card.num > 0) ? `${card.path}#${urlHash}` : card.path)"
                                    :aria-label="`Select Card ${card.name} ${card.id}`"
                                >Select Card</a>
                                <a
                                    class="link-attack-orange card-link position-relative z-2"
                                    :href="resolveURL(card.url)"
                                    :aria-label="`Attack Page for ${card.name} ${card.id}`"
                                    target="_blank"
                                    rel="noreferrer noopener"
                                >ATT&amp;CK Page</a>
                            </div>
                        </div>

                    </div>
                </template>

                {# Page Select #}
                <div class="col-12" x-cloak x-show="paginatedCards.length > 1">
                    <h2 class="visually-hidden">Page Select</h2>

                    <div class="hstack gap-1 mt-1">

                        {# Back #}
                        <button
                            :disabled="page === 1"
                            :class="(page === 1) ? 'btn-secondary' : 'btn-dark'"
                            class="btn"
                            type="button"
                            @click="page = page - 1"
                            title="Previous answer card page"
                            aria-label="Previous answer card page"
                        >
                            <i class="bi bi-caret-left-fill" aria-hidden="true"></i>
                        </button>

                        <span
                            class="ms-2 me-2"
                            x-text="`${page} / ${paginatedCards.length}`"
                            title="Answer card page"
                            :aria-label="`Answer card page ${page} / ${paginatedCards.length}`"
                        ></span>

                        {# Forward #}
                        <button
                            :disabled="page === paginatedCards.length"
                            :class="(page === paginatedCards.length) ? 'btn-secondary' : 'btn-dark'"
                            class="btn"
                            type="button"
                            @click="page = page + 1"
                            title="Next answer card page"
                            aria-label="Next answer card page"
                        >
                            <i class="bi bi-caret-right-fill" aria-hidden="true"></i>
                        </button>
                    </div>
                </div>

            </div>
        </div>
    </div>

</div>

<script>
    document.addEventListener('alpine:init', function() {
        const crumbs = {{ breadcrumbs | tojson }};
        crumbs[0]['name'] = 'Home';

        const question = {{ question | tojson }};

        const platformFilters = {{ platform_filters | tojson }};
        cleanupFilterObject(platformFilters, true);

        const dataSrcFilters = {{ data_source_filters | tojson }};
        cleanupFilterObject(dataSrcFilters, true);

        Alpine.store('question', {
            crumbs: bracketizeCrumbIDs(crumbs),
            text  : question.question,
            id    : question.id,
            tactic: question.tactic,
            platformFilters: platformFilters,
            dataSrcFilters: dataSrcFilters,
            markjs_opts: {
                accuracy: {
                    value: "exactly",
                    limiters: [
                        ",", ".", "(", ")", "-", "_", "/", "\\", "?", "!",
                        "'",'"', "|", "+", "@", "[", "]", "{", "}", "<", ">",
                        "#", "$", "%", "^", "`", "&", "*", ":", ";", "~"
                    ],
                },
            },
        });
    });
</script>

{% endblock %}
